{% extends "single_demo.html" %}

{% block demo-header %}tv.ui.Grid{% endblock %}

{% block demo-content %}

<style type="text/css">
.tv-grid {
  height: 580px;
}

.tv-grid .tv-container-middle-scroll {
  -webkit-transition: top 500ms ease;
}

.photo-grid {
  overflow: hidden;
  margin: 10px;
}

.photo-grid .photo-grid-row {
  display: block;
  white-space: nowrap;
}

.photo-grid .photo {
  border: 1px solid #626262;
  cursor: pointer;
  display: inline-block;
  height: 133px;
  margin: 7px;
  overflow: hidden;
  width: 200px;
  box-shadow: 0 0 10px #000;
  vertical-align: top;
  -webkit-box-shadow: 0 0 10px #000;
}

.photo-grid .photo:hover,
.photo-grid .photo.tv-component-focused {
  -webkit-box-shadow: 0 0 30px #6391de, 0 0 15px #f2f2f2, 0 0 5px #FFF;
}

.photo img {
  width: 200px;
}

.photo.portrait img {
  margin-top: -60px;
}
</style>

<div class="tv-grid photo-grid tv-container-vertical">
  <div class="tv-container-middle-scroll">
    <div class="tv-container-horizontal photo-grid-row">
      <div class="tv-button photo landscape"><img src="http://www.gstatic.com/tv/thumb/movies/74686/74686_bp.jpg"></div>
      <div class="tv-button photo portrait"><img src="http://www.gstatic.com/tv/thumb/movies/74686/74686_bj.jpg"></div>
      <div class="tv-button photo landscape"><img src="http://www.gstatic.com/tv/thumb/movies/74686/74686_bc.jpg"></div>
    </div>
    <div class="tv-container-horizontal photo-grid-row">
      <div class="tv-button photo portrait"><img src="http://www.gstatic.com/tv/thumb/movies/74686/74686_bh.jpg"></div>
      <div class="tv-button photo portrait"><img src="http://www.gstatic.com/tv/thumb/movies/74686/74686_bm.jpg"></div>
      <div class="tv-button photo landscape"><img src="http://www.gstatic.com/tv/thumb/movies/74686/74686_bl.jpg"></div>
    </div>
    <div class="tv-container-horizontal photo-grid-row">
      <div class="tv-button photo portrait"><img src="http://www.gstatic.com/tv/thumb/movies/74686/74686_bk.jpg"></div>
      <div class="tv-button photo landscape"><img src="http://www.gstatic.com/tv/thumb/movies/74686/74686_bn.jpg"></div>
      <div class="tv-button photo landscape"><img src="http://www.gstatic.com/tv/thumb/movies/74686/74686_bs.jpg"></div>
    </div>
    <div class="tv-container-horizontal photo-grid-row">
      <div class="tv-button photo landscape"><img src="http://www.gstatic.com/tv/thumb/movies/74686/74686_bo.jpg"></div>
      <div class="tv-button photo landscape"><img src="http://www.gstatic.com/tv/thumb/movies/74686/74686_ba.jpg"></div>
      <div class="tv-button photo landscape"><img src="http://www.gstatic.com/tv/thumb/movies/74686/74686_bd.jpg"></div>
    </div>
    <div class="tv-container-horizontal photo-grid-row">
      <div class="tv-button photo landscape"><img src="http://www.gstatic.com/tv/thumb/movies/74686/74686_bq.jpg"></div>
      <div class="tv-button photo landscape"><img src="http://www.gstatic.com/tv/thumb/movies/74686/74686_be.jpg"></div>
      <div class="tv-button photo portrait"><img src="http://www.gstatic.com/tv/thumb/movies/74686/74686_bf.jpg"></div>
    </div>
    <div class="tv-container-horizontal photo-grid-row">
      <div class="tv-button photo landscape"><img src="http://www.gstatic.com/tv/thumb/movies/74686/74686_bt.jpg"></div>
      <div class="tv-button photo portrait"><img src="http://www.gstatic.com/tv/thumb/movies/74686/74686_bg.jpg"></div>
      <div class="tv-button photo landscape"><img src="http://www.gstatic.com/tv/thumb/movies/74686/74686_br.jpg"></div>
    </div>
    <div class="tv-container-horizontal photo-grid-row">
      <div class="tv-button photo landscape"><img src="http://www.gstatic.com/tv/thumb/movies/74686/74686_bu.jpg"></div>
      <div class="tv-button photo landscape"><img src="http://www.gstatic.com/tv/thumb/movies/74686/74686_bi.jpg"></div>
      <div class="tv-button photo landscape"><img src="http://www.gstatic.com/tv/thumb/movies/74686/74686_bb.jpg"></div>
    </div>
  </div>
</div>

{% endblock %}
